<!-- 缴费项目列表 -->
<script setup>
const prop = defineProps({
  bizconent: {
    require: true,
    type: Array
  }
})
const emit = defineEmits(['complete'])
//确认选择缴费项目
const clickProject = (id) => {
  emit('complete', id)
}
</script>

<template>
  <div id="project-info-list">
    <van-empty
      v-if="prop.bizconent.length === 0"
      image-size="100"
      description="抱歉，未查询到相关缴费项目"
    />
    <template v-else>
      <div
        class="project-item"
        v-for="item in prop.bizconent"
        :key="item.projectId"
        @click="clickProject(item.projectId)"
      >
        <div class="name">{{ item.projectName }}</div>
        <van-icon name="arrow" />
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
#project-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--van-padding-xs);
  .project-item {
    display: flex;
    align-items: center;
    gap: var(--van-padding-base);
    padding: var(--van-padding-sm);
    border: 1px solid var(--van-gray-4);
    border-radius: var(--van-border-radius-lg);
    &:active {
      background: var(--van-gray-1);
    }
    .name {
      flex-grow: 1;
      color: var(--van-gray-9);
      font-size: var(--van-font-size-lg);
    }
    .van-icon-arrow {
      color: var(--van-gray-6);
    }
  }
}
</style>
